<template>
  <div class="execution">
    <basic-container>
      <avue-crud ref="crud"
                 :page.sync="page"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 v-model="form"
                 @on-load="getList"
                 @search-change="searchChange"
                 @refresh-change="refreshChange"
                 @size-change="sizeChange"
                 @current-change="currentChange"
                 @row-update="update"
                 @row-save="create">
        <template slot="menuLeft">
          <el-button v-if="permissions.article_add"
                     class="filter-item"
                     type="primary"
                     size="small"
                     icon="el-icon-plus"
                     @click="handleCreate()">添加
          </el-button>
        </template>
        <!-- <template slot="coverPicture"
                  slot-scope="scope">
          <div class="avue-crud__img">
            <el-image :src="scope.row.coverPicture"
                      :preview-src-list="[ scope.row.coverPicture ]" />
          </div>
        </template> -->
        <template slot="menu"
                  slot-scope="scope">
          <el-button v-if="permissions.article_edit"
                     type="text"
                     size="small"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row,scope.index)">编辑
          </el-button>
          <el-button v-if="permissions.article_del"
                     type="text"
                     size="small"
                     icon="el-icon-delete"
                     @click="handleDelete(scope.row,scope.index)">删除
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { addObj, putObj, delObj, fetchList, } from "@/api/marketing/article";
import { tableOption } from "@/const/crud/marketing/article";
import { mapGetters } from "vuex";

export default {
  name: "article",
  data () {
    return {
      materialDialog: false,
      searchForm: {},
      tableData: [],
      form: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
    };
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  methods: {
    getList (page, params) {
      this.tableLoading = true;
      fetchList(
        Object.assign(
          {
            descs: "create_time",
            current: page.currentPage,
            size: page.pageSize,
          },
          params,
          this.searchForm
        )
      ).then((response) => {
        this.tableData = response.data.data.records;
        this.page.total = response.data.data.total;
        this.tableLoading = false;
      })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    handleCreate () {
      this.$refs.crud.rowAdd()
    },
    handleUpdate (row, index) {
      this.$refs.crud.rowEdit(row, index)
    },
    handleDelete: function (row, index) {
      this.$confirm(`是否确认删除【${row.title}】文章`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(row.articleId);
        })
        .then((resp) => {
          this.$message.success(resp.data.message);
          this.getList(this.page);
        });
    },
    create (row, done, loading) {
      addObj(this.form).then((resp) => {
        this.getList(this.page)
        done()
        this.$notify.success(resp.data.message)
      }).catch(() => {
        loading()
      })
    },
    update (row, index, done, loading) {
      putObj(this.form).then((resp) => {
        this.getList(this.page)
        done()
        this.$notify.success(resp.data.message)
      }).catch(() => {
        loading()
      })
    },
    searchChange (form, done) {
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    refreshChange () {
      this.searchForm = this.form;
      this.getList(this.page);
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange (current) {
      this.page.currentPage = current;
    }
  },
};
</script>

